<!-- 监控运行动态 -->
<template>
  <a-card title="监控运行动态" :bordered="false">
    <span slot="extra" class="cus-text" pointer @click="onCheckMonitoring()">查看明细</span>
    <div class="timeLine-box">
      <a-timeline>
        <a-timeline-item v-for="(item, index) in timelineList" :key="index" :color="index === 0 ? 'blue' : 'gray'">
          <div>{{ item.title }} {{ item.time }}</div>
          <div>{{ item.content }}</div>
        </a-timeline-item>
      </a-timeline>
    </div>
    <c-modal
      title="监控运行动态"
      :visible.sync="dialogVisible"
      :centered="true">
      <div class="content-box">
        <div class="tip-box">供应商综合监控模型 V1.0</div>
        <div class="search-box">
          <a-row>
            <a-col :span="8">
              <a-range-picker
                v-model="monitoringTime"
                format="YYYY-MM-DD"
                @change="(timeRange, timeStringRange) => setTimeRange('monitoringTimeStart', 'monitoringTimeEnd', timeRange, timeStringRange)">
                <a-icon slot="suffixIcon" type="calendar" />
              </a-range-picker>
            </a-col>
            <a-col :span="16">
              <a-button class="ml-10" @click="onToday">今天</a-button>
            </a-col>
          </a-row>
        </div>
        <div class="timeLine-box">
          <a-timeline>
            <a-timeline-item v-for="(item, index) in timelineList" :key="index" :color="index === 0 ? 'blue' : 'gray'">
              <div>{{ item.title }} {{ item.time }}</div>
              <div>{{ item.content }}</div>
            </a-timeline-item>
          </a-timeline>
        </div>
      </div>
      <template slot="footer">
        <div class="flex-center">
          <a-button @click="dialogVisible = false">关闭</a-button>
        </div>
      </template>
    </c-modal>
  </a-card>
</template>

<script>
export default {
  name: 'MonitoringOperation',
  data() {
    return {
      timelineList: [
        {
          title: '正常监控',
          time: '2024-01-06 09:00:00',
          content: `重大事件（1）个，供应商[广东盛世机械集团]出现[经营异常]，触发管控规则：自动化冻结供应商，并发送消息至对应邮箱/手机号`
        },
        {
          title: '正常监控',
          time: '2024-01-05 09:00:00',
          content: `暂无任何供应商风险问题`
        },
        {
          title: '正常监控',
          time: '2024-01-04 09:00:00',
          content: `暂无任何供应商风险问题`
        },
        {
          title: '正常监控',
          time: '2024-01-03 09:00:00',
          content: `暂无任何供应商风险问题`
        },
        {
          title: '正常监控',
          time: '2024-01-02 09:00:00',
          content: `暂无任何供应商风险问题`
        },
        {
          title: '正常监控',
          time: '2024-01-01 09:00:00',
          content: `暂无任何供应商风险问题`
        },
      ],
      dialogVisible: false,
      monitoringTime: [],
      monitoringTimeStart: '',
      monitoringTimeEnd: '',
    }
  },
  methods: {
    onCheckMonitoring() {
      this.dialogVisible = true;
    }
  }
}
</script>

<style lang="less" scoped>
.timeLine-box {
  padding: 20px 10px;
  max-height: 370px;
  overflow-y: auto;
}
.tip-box {
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  background-color: rgba(245,245,245,1);
  padding: 0 25px;
}
.search-box {
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
  padding: 10px;
}
</style>